iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Mobile Development

30天用React native製作app!!系列 第 2

[蚊子的Day2]React Native環境安裝

  • 分享至 

  • xImage
  •  

上一篇提到了專案的規劃,這一篇來做一下React Native的環境安裝。

React Native是臉書(facebook)所研發的開源應用程式架構,可利用Javascript建立原生的iOS與Android應用程式框架。

環境建立

Step1:安裝Vscode(網址: https://code.visualstudio.com/ )
https://ithelp.ithome.com.tw/upload/images/20200908/20129575hpVCIJFzgb.png

若需要中文介面,可於延伸模組(Extensions)安裝繁體中文的語言套件,之後重新啟動Vscode就可換成中文版介面。

https://ithelp.ithome.com.tw/upload/images/20200908/20129575eHCWyl8yBq.png

若想改回英文介面,則先按下ctrl+shift+p(mac: cmd+shift+p),然後輸入Configure Display Language,之後選擇en並重新啟動Vscode即可換回英文介面。

https://ithelp.ithome.com.tw/upload/images/20200908/20129575PbTqiMoewv.pnghttps://ithelp.ithome.com.tw/upload/images/20200908/20129575oQAptQWse2.png

Step2:Vscode安裝完成後,點開延伸模組,安裝React Native Tools以及Visual Studio IntelliCode套件。

https://ithelp.ithome.com.tw/upload/images/20200908/20129575WPW25Zd5j2.pnghttps://ithelp.ithome.com.tw/upload/images/20200908/20129575UvrQ0fuXQs.png

React Native Tools是在Vscode上使用React Native必須的套件,而Visual Studio IntelliCode則是為Python、Java、TypeScript 和 JavaScript 提供人工智慧輔助的 IntelliSense,可預測最可能正確的API 給開發人員使用。

https://ithelp.ithome.com.tw/upload/images/20200908/20129575Kw8dkQiPPo.png

Step3:安裝node.js(網址: https://nodejs.org/en/ )
安裝node.js是為了在終端機能使用「npm」這個指令,npm 全名為node package manage,此為node module 管理包,藉由安裝npm之後可以輕鬆使用npm install xxx 的方式安裝任意模組。
https://ithelp.ithome.com.tw/upload/images/20200908/20129575odUaP7nPLo.png

關於環境安裝還有的部分沒補充到,下篇繼續~


上一篇
[蚊子的Day1]30天用React Native製作一款迎新活動app
下一篇
[蚊子的Day3]React Native專案建置
系列文
30天用React native製作app!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言